<template>
  <div>
    <!-- 点击转移到那边去 -->
    <div class="info">
      <div class="showLeft" @click="ShouwLeft"><i title="上一张" class="el-icon-arrow-left"></i></div>
      <div class="showright" @click="ShouwRight"><i title="下一张" class="el-icon-arrow-right"></i></div>
      <div class="info-list">
        <div class="info-list-box" id="infomationTitleBox">
          <ul class="info-list-ul" id="infomationTitleUl" :style="imgStyle">
            <li :class="index === imgActiveIndex? 'info-list-li highlight' : 'info-list-li'" v-for="item,index in imgUrlList" :key="item.id + index" :id="'infomation' + index"
              @click="clickTitle(item, index)">
              <img :src="item.url" alt="" style="width:80px;height:80px">
            </li>
          </ul>
        </div>
      </div>
      <div class="left" style="padding:20px;color:pink;cursor: pointer;" @click="leFt"> <i title="上一张" class="el-icon-arrow-left">左边</i></div>
      <div class="right" style="padding:20px;color:pink;cursor: pointer;" @click="rigHt"> <i title="下一张" class="el-icon-arrow-right">右边</i></div>
      <img :src="isShowUrl" alt="">
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      titleList: [
        { title: "最新", isHighlight: true },
        { title: "电影推荐", isHighlight: false },
        { title: "濒危动物", isHighlight: false },
        { title: "爱豆说环保", isHighlight: false },
        { title: "环保书籍", isHighlight: false },
        { title: "在线咨询", isHighlight: false },
        { title: "政策文件", isHighlight: false },
        { title: "低碳视频", isHighlight: false },
        { title: "低碳艺术", isHighlight: false },
        { title: "低碳标讯", isHighlight: false },
        { title: "低碳福建", isHighlight: false },
        { title: "低碳上海", isHighlight: false },
        { title: "低碳北京", isHighlight: false },
        { title: "低碳深圳", isHighlight: false },
        { title: "低碳广州", isHighlight: false },
        { title: "低碳天津", isHighlight: false },
        { title: "低碳杭州", isHighlight: false },
        { title: "低碳南京", isHighlight: false },
        { title: "低碳湖北", isHighlight: false },
        { title: "低碳茂名", isHighlight: false },
        { title: "低碳湛江", isHighlight: false },
        { title: "低碳广州", isHighlight: false },
        { title: "低碳深圳", isHighlight: false },
        { title: "低碳达泰", isHighlight: false },
        { title: "低碳汶川", isHighlight: false },
        { title: "低碳四川", isHighlight: false },
      ],
      imgUrlList: [
        {
          url: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
          isHighlight: true,
          id: 1,
        },
        {
          url: "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
          isHighlight: false,
          id: 2,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 3,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 4,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 5,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 6,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 7,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 8,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 9,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 10,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 11,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 12,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 13,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 14,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 15,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 16,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 17,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 18,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 19,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 20,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 21,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 22,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 23,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 24,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 25,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 147,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 1575,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 155,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 1757,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 1545,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 1645,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 1545,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 1548,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 1775,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 45,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 452,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 453,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 48,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 49,
        },
        {
          url: "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
          isHighlight: false,
          id: 31,
        },
        {
          url: "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
          isHighlight: false,
          id: 78,
        },
        {
          url: "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
          isHighlight: false,
          id: 98,
        },
        {
          url: "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
          isHighlight: false,
          id: 983,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 981,
        },
        {
          url: "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
          isHighlight: false,
          id: 983,
        },
        {
          url: "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
          isHighlight: false,
          id: 9855,
        },
        {
          url: "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
          isHighlight: false,
          id: 985555,
        },
      ],
      isShowUrl: "",
      imgActiveIndex: 0, // 当前移动图片的索引值
      imgDistance: 0, // 移动的距离
      allDistance: 0, // 总移动距离
      screenWidth: document.body.clientWidth,
    };
  },
  computed: {
    imgStyle() {
      return {
        left: `${this.imgDistance}px`, // 计算移动的距离(x,y,z)
      };
    },
    width() {
      let domWidth =
        document.getElementById("infomationTitleBox").offsetWidth / 2;
      return domWidth;
    },
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        that.screenWidth = window.screenWidth;
      })();
    };
  },
  methods: {
    ShouwRight() {
      if (
        this.imgUrlList.length * 104 >
        this.screenWidth + Math.abs(this.imgDistance)
      ) {
        this.imgDistance = this.imgDistance - 300;
      }
      // console.log(this.imgUrlList.length, this.imgUrlList.length * 104);
    },
    ShouwLeft() {
      if (
        (this.imgDistance < 0 && Math.abs(this.imgDistance) < 300) ||
        Math.abs(this.imgDistance) == 300
      ) {
        this.imgDistance = this.imgDistance + Math.abs(this.imgDistance);
      } else if (Math.abs(this.imgDistance) > 300) {
        this.imgDistance = this.imgDistance + 300;
      }

      // console.log("first");
      // if (this.imgDistance < 0 && this.imgDistance != 0) {
      //   if (
      //     Math.abs(this.imgDistance) < 300 ||
      //     Math.abs(this.imgDistance) == 300 ||
      //     this.imgDistance != 0
      //   ) {
      //     this.imgDistance = this.imgDistance + 300;
      //     // this.
      //   }
      // }
    },
    clickTitle(item, index) {
      console.log(item, index);
      // this.imgUrlList.forEach((item, index) => {
      this.imgActiveIndex = index;
      // });
      // this.imgDistance = 0;
      item.isHighlight = true;
      let domId = "infomation" + index;
      let domLeft = document.getElementById(domId).offsetLeft;
      let ulDom = document.getElementById("infomationTitleUl");
      // console.log(ulDom)
      if (domLeft > this.width) {
        ulDom.style.left = this.width - domLeft + "px";
        this.imgDistance = this.width - domLeft;
      } else {
        ulDom.style.left = 0;
      }
    },
    leFt() {
      if (this.imgActiveIndex > 0) {
        this.imgActiveIndex--; // 索引值-1
        this.imgUrlList.forEach((item, index) => {
          // 循环小图,通过判断索引值赋值给大图
          if (this.imgActiveIndex === index) {
            // this.mainImgUrl = item;
            this.srcList = [];
            // let params = {};
            // params.resId = item.id;
            // params.pictureStyle = "Picture_preview_w_1600";
            // getDetailfile(params).then((res) => {
            //   if (res.code == 0) {
            //     this.srcList.push(res.data.url);
            //   }
            // });
            this.srcList.push(this.imgUrlList[index].url);

            this.isShowData = this.imgUrlList[index];
          }
        });
      }
      if (this.imgActiveIndex >= 9) {
        var index = 0;
        const temp = window.setInterval(() => {
          // 利用定时器实现图片左右移动的动画效果
          if (index < 52) {
            // 移动次数(33次)
            this.imgDistance += 2; // 每次向左移动的距离 (移动总距离为33*this.imgDistance)
            index++;
            return;
          } else {
            window.clearInterval(temp); // 移动完清除定时器
          }
        }, 10);
      }
    },
    rigHt() {
      if (this.imgActiveIndex < this.imgUrlList.length - 1) {
        this.imgActiveIndex++;
        this.imgUrlList.forEach((item, index) => {
          if (this.imgActiveIndex === index) {
            this.srcList = [];
            this.srcList.push(this.imgUrlList[index].url);
            this.isShowData = this.imgUrlList[index];
          }
        });
        // this.imgDistance怎么拿到66px的 这里？
        // if (this.screenWidth / 80 == this.imgActiveIndex) {
        // this.allDistance = -80 * (this.imgActiveIndex - 4);
        var index = 0;
        const temp = window.setInterval(() => {
          // 边距和图片大小 ===============
          if (index < 52) {
            this.imgDistance -= 2; // 每次向右移动的距离
            index++;
            return;
          } else {
            window.clearInterval(temp);
          }
        }, 1);
        console.log(index, this.imgDistance, this.allDistance);
        // }
        console.log(this.imgDistance, this.allDistance);
      }
    },
  },
  watch: {
    screenWidth(val) {
      this.screenWidth = val;
      console.log("this.screenWidth", this.screenWidth);
    },
  },
};
</script>
<style lang='scss' scoped>
.info {
  width: 98%;
  margin: 50px auto;
  position: relative;
  .showLeft {
    position: absolute;
    left: -15px;
    top: 10px;
    // width: 30px;
    // height: 30px;
    .el-icon-arrow-left {
      color: red;
      font-size: 18px;
    }
  }
  .showright {
    right: -15px;
    top: 10px;
    position: absolute;
    .el-icon-arrow-right {
      font-size: 18px;
      color: pink;
    }
  }
  .info-list {
    width: 100%;
    .info-list-box {
      width: 100%;
      position: relative;
      overflow: hidden;
      height: 40px;
      .info-list-ul {
        display: flex;
        position: absolute;
        transition: all 0.3s;
        .info-list-li {
          padding: 4px 12px;
          white-space: nowrap;
          cursor: pointer;
        }
        .info-list-li:hover {
          color: #409eff;
        }
        .highlight {
          position: relative;
          background-color: #409eff;
          color: #fff;
        }
        .highlight:hover {
          color: #fff;
        }
        .highlight::after {
          content: "";
          position: absolute;
          bottom: -5px;
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 5px solid #409eff;
        }
      }
    }
  }
}
</style>
